import React from 'react'
import * as echarts from 'echarts'

const mystyle = { height: "100%", width: "100%" }

class EchartsLine extends React.Component {

    //方法会返回一个布尔值，指定 React 是否应该继续渲染，默认值是 true， 即 state 每次发生变化组件都会重新渲染。
    shouldComponentUpdate(prevProps, prevState) {
        console.log(prevProps, prevState, 'componentDidUpdate')
        var newOption = {
            series: [{
                data: prevProps.tem1
            }, {
                data: prevProps.tem2
            }],
            xAxis: {
                data: prevProps.date
            }
        };
        // 使用新数据更新图表
        this.myEchartsLine.setOption(newOption);
        return true
    }

    //在挂在完后执行的方法
    componentDidMount = () => {
        this.myEchartsLine = echarts.init(document.getElementById("myEchartsLine"))
        let option = {
            title: {
                text: '未来7天的温度',
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {},
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: '#fff'
                },
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [
                {
                    name: 'Highest',
                    type: 'line',
                    data: [],
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                },
                {
                    name: 'Lowest',
                    type: 'line',
                    data: [],
                    markPoint: {
                        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: 'Avg' },
                            [
                                {
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                },
                                {
                                    symbol: 'circle',
                                    label: {
                                        position: 'start',
                                        formatter: 'Max'
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }
                            ]
                        ]
                    }
                }
            ]
        }

        this.myEchartsLine.setOption(option)

    }

    render() {
        return (
            <div style={{ height: "100%" }}>
                <div id="myEchartsLine" style={mystyle}></div>
            </div>
        )
    }
}

export default EchartsLine